<html>
    <head>
        <script src="https://kit.fontawesome.com/3a8b9e99a6.js" crossorigin="anonymous"></script>

        <style type="text/css">
        body{
            background-color:antiquewhite;
        }
        .headbar{
            background-color:rgb(134, 134, 125);
        }
        .headbar a{
            text-decoration: none;
            color:rgba(241, 239, 239, 0.712);
        }.headbar a:hover{
            color:white;
        }
        .headbar ul{
            overflow: auto;
            color:white;
            padding:10px;
            margin:auto;
            width:65%;
            text-align: center;
        }
        .headbar ul li{
            
            float:left;
            margin-left:15px;
            list-style-type: none;
        }
        .podcast{
            color:rgb(236, 222, 91);
        }
        #maintitle{
            margin-right:80px;
            font-size:20px;
        }
        .imglogo{
            width:40px;
            height:40px;
            border-radius:50%;
        }
        .litext{
            margin-top:10px;
        }
        </style>
        <title>Custom css example</title>
    </head>

    <body>
        <div class="headbar">
            <ul>
                <li><img class="imglogo" src="logo.png"></li>
                <li class="litext" id="maintitle"><a href="#">TalkPython['<span class="podcast">Podcast</span>']</a></li>
                <li class="litext"><a href="#">Episodes</a></li>
                <li class="litext"> <a href="#">Python Courses</a></li>
                <li class="litext"><a href="#">Friends of the show</a></li>
                <li class="litext"><a href="#">Patreon</a></li>
                <li class="litext"><a href="#">Contact</a></li>
                <li class="litext"><a href="#"><i class="fas fa-search"></i></a></li>
            </ul>
        </div>

        <div class="mainbody">
            
        </div>
    </body>
</html>